<!DOCTYPE html>
<html lang=zh>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  
  
  <title>JavaScript | 逸辰</title>
  <meta name="description" content="1、什么是JavaScriptJavaScript是一门世界上最流行的脚本语言 ECMAScript是JavaScript的一个标准 最新版本已经到es6，但是大部分浏览器只支持es5 2、快速入门引入JavaScript1、内部标签 123&lt;script&gt;    &#x2F;&#x2F;&lt;&#x2F;script&gt;  2、外部引入 demo1.js 1&lt;script src&#x3D;&quot;js&#x2F;demo1.">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript">
<meta property="og:url" content="https://yichenfirst.github.io/2021/06/08/%E5%89%8D%E7%AB%AF/JavaScript/index.html">
<meta property="og:site_name" content="逸辰">
<meta property="og:description" content="1、什么是JavaScriptJavaScript是一门世界上最流行的脚本语言 ECMAScript是JavaScript的一个标准 最新版本已经到es6，但是大部分浏览器只支持es5 2、快速入门引入JavaScript1、内部标签 123&lt;script&gt;    &#x2F;&#x2F;&lt;&#x2F;script&gt;  2、外部引入 demo1.js 1&lt;script src&#x3D;&quot;js&#x2F;demo1.">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-161624.png">
<meta property="og:image" content="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-161716.png">
<meta property="og:image" content="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-161825.png">
<meta property="article:published_time" content="2021-06-07T16:00:00.000Z">
<meta property="article:modified_time" content="2023-07-17T13:41:27.764Z">
<meta property="article:author" content="逸辰">
<meta property="article:tag" content="javascript">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-161624.png">
  <!-- Canonical links -->
  <link rel="canonical" href="https://yichenfirst.github.io/2021/06/08/%E5%89%8D%E7%AB%AF/JavaScript/index.html">
  
    <link rel="alternate" href="/atom.xml" title="逸辰" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png" type="image/x-icon">
  
  
<link rel="stylesheet" href="/css/style.css">

  
  
  
  
<meta name="generator" content="Hexo 6.3.0">
<style>.github-emoji { position: relative; display: inline-block; width: 1.2em; min-height: 1.2em; overflow: hidden; vertical-align: top; color: transparent; }  .github-emoji > span { position: relative; z-index: 10; }  .github-emoji img, .github-emoji .fancybox { margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; text-decoration: none !important; user-select: none !important; cursor: auto !important; }  .github-emoji img { height: 1.2em !important; width: 1.2em !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; user-select: none !important; cursor: auto !important; } .github-emoji-fallback { color: inherit; } .github-emoji-fallback img { opacity: 0 !important; }</style>
</head>


<body class="main-center" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="" target="_blank">
          <img class="img-circle img-rotate" src="/images/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">逸辰</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">后端开发</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> 长春，中国</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="搜索" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="想要查找什么..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav ">
        
        
        <li class="menu-item menu-item-home">
          <a href="/.">
            
            <i class="icon icon-home-fill"></i>
            
            <span class="menu-title">首页</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-archives">
          <a href="/archives">
            
            <i class="icon icon-archives-fill"></i>
            
            <span class="menu-title">归档</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-categories">
          <a href="/categories">
            
            <i class="icon icon-folder"></i>
            
            <span class="menu-title">分类</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-tags">
          <a href="/tags">
            
            <i class="icon icon-tags"></i>
            
            <span class="menu-title">标签</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-about">
          <a href="/about">
            
            <i class="icon icon-cup-fill"></i>
            
            <span class="menu-title">关于</span>
          </a>
        </li>
        
      </ul>
      
    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">公告</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <p>欢迎交流与分享经验!</p>
            </div>
        </div>
    </div>
</div>

    
      
  <div class="widget">
    <h3 class="widget-title">分类</h3>
    <div class="widget-body">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/ElasticSearch/">ElasticSearch</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/docker/">docker</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/go/">go</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/java/">java</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/mybatis/">mybatis</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/mysql/">mysql</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/redis/">redis</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/spring/">spring</a><span class="category-list-count">9</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue/">vue</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%88%86%E5%B8%83%E5%BC%8F/">分布式</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/">操作系统</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/">计算机网络</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E9%9D%A2%E8%AF%95/">面试</a><span class="category-list-count">3</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">标签</h3>
    <div class="widget-body">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/ElasticSearch/" rel="tag">ElasticSearch</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/aop/" rel="tag">aop</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/docker/" rel="tag">docker</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/go/" rel="tag">go</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/java/" rel="tag">java</a><span class="tag-list-count">7</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/" rel="tag">javascript</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mybatis/" rel="tag">mybatis</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mysql/" rel="tag">mysql</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/redis/" rel="tag">redis</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/spring/" rel="tag">spring</a><span class="tag-list-count">9</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/springcloud/" rel="tag">springcloud</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/springsecurity/" rel="tag">springsecurity</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/tcp/" rel="tag">tcp</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/token/" rel="tag">token</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue/" rel="tag">vue</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%80%BB%E7%BB%93/" rel="tag">总结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/" rel="tag">操作系统</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag">面试</a><span class="tag-list-count">1</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">标签云</h3>
    <div class="widget-body tagcloud">
      <a href="/tags/ElasticSearch/" style="font-size: 13px;">ElasticSearch</a> <a href="/tags/aop/" style="font-size: 13px;">aop</a> <a href="/tags/docker/" style="font-size: 13px;">docker</a> <a href="/tags/go/" style="font-size: 13px;">go</a> <a href="/tags/java/" style="font-size: 13.86px;">java</a> <a href="/tags/javascript/" style="font-size: 13px;">javascript</a> <a href="/tags/mybatis/" style="font-size: 13px;">mybatis</a> <a href="/tags/mysql/" style="font-size: 13.57px;">mysql</a> <a href="/tags/redis/" style="font-size: 13.71px;">redis</a> <a href="/tags/spring/" style="font-size: 14px;">spring</a> <a href="/tags/springcloud/" style="font-size: 13px;">springcloud</a> <a href="/tags/springsecurity/" style="font-size: 13px;">springsecurity</a> <a href="/tags/tcp/" style="font-size: 13px;">tcp</a> <a href="/tags/token/" style="font-size: 13px;">token</a> <a href="/tags/vue/" style="font-size: 13.43px;">vue</a> <a href="/tags/%E6%80%BB%E7%BB%93/" style="font-size: 13.14px;">总结</a> <a href="/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/" style="font-size: 13.29px;">操作系统</a> <a href="/tags/%E9%9D%A2%E8%AF%95/" style="font-size: 13px;">面试</a>
    </div>
  </div>

    
      
  <div class="widget">
    <h3 class="widget-title">归档</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/09/">九月 2023</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/07/">七月 2023</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/05/">五月 2023</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/04/">四月 2023</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/03/">三月 2023</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/02/">二月 2023</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/01/">一月 2023</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/12/">十二月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/11/">十一月 2022</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/10/">十月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/09/">九月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/08/">八月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/06/">六月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/04/">四月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/02/">二月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/01/">一月 2022</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/10/">十月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/09/">九月 2021</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/08/">八月 2021</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/07/">七月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/06/">六月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/03/">三月 2021</a><span class="archive-list-count">2</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled no-thumbnail">
        
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/%E5%88%86%E5%B8%83%E5%BC%8F/">分布式</a>
              </p>
              <p class="item-title">
                <a href="/2023/09/01/%E5%88%86%E5%B8%83%E5%BC%8F/%E5%88%86%E5%B8%83%E5%BC%8F%E4%BA%8B%E5%8A%A1/" class="title">分布式事务</a>
              </p>
              <p class="item-date">
                <time datetime="2023-09-01T08:53:49.259Z" itemprop="datePublished">2023-09-01</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/java/">java</a>
              </p>
              <p class="item-title">
                <a href="/2023/07/28/java/Java%E7%BA%BF%E7%A8%8B%E6%A8%A1%E5%9E%8B/" class="title">Java线程模型</a>
              </p>
              <p class="item-date">
                <time datetime="2023-07-28T13:59:18.661Z" itemprop="datePublished">2023-07-28</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/java/">java</a>
              </p>
              <p class="item-title">
                <a href="/2023/05/19/java/AQS/" class="title">AQS详解</a>
              </p>
              <p class="item-date">
                <time datetime="2023-05-18T16:00:00.000Z" itemprop="datePublished">2023-05-19</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/go/">go</a>
              </p>
              <p class="item-title">
                <a href="/2023/05/03/go/new%E4%B8%8Emake%E5%85%B3%E9%94%AE%E5%AD%97%E7%9A%84%E5%8C%BA%E5%88%AB/" class="title">new与make关键字的区别</a>
              </p>
              <p class="item-date">
                <time datetime="2023-05-02T16:00:00.000Z" itemprop="datePublished">2023-05-03</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/java/">java</a>
              </p>
              <p class="item-title">
                <a href="/2023/04/15/java/CAS/" class="title">CAS</a>
              </p>
              <p class="item-date">
                <time datetime="2023-04-14T16:00:00.000Z" itemprop="datePublished">2023-04-15</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<main class="main" role="main">
  <div class="content">
  <article id="post-前端/JavaScript" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      
        
  
    <h1 class="article-title" itemprop="name">
      JavaScript
    </h1>
  

      
      <div class="article-meta">
        <span class="article-date">
    <i class="icon icon-calendar-check"></i>
	<a href="/2021/06/08/%E5%89%8D%E7%AB%AF/JavaScript/" class="article-date">
	  <time datetime="2021-06-07T16:00:00.000Z" itemprop="datePublished">2021-06-08</time>
	</a>
</span>
        
        
  <span class="article-tag">
    <i class="icon icon-tags"></i>
	<a class="article-tag-link-link" href="/tags/javascript/" rel="tag">javascript</a>
  </span>


        
	<span class="article-read hidden-xs">
	    <i class="icon icon-eye-fill" aria-hidden="true"></i>
	    <span id="busuanzi_container_page_pv">
			<span id="busuanzi_value_page_pv">0</span>
		</span>
	</span>


        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/2021/06/08/%E5%89%8D%E7%AB%AF/JavaScript/#comments" class="article-comment-link">评论</a></span>
        
	
		<span class="post-wordcount hidden-xs" itemprop="wordCount">字数统计: 2.7k(字)</span>
	
	
		<span class="post-readcount hidden-xs" itemprop="timeRequired">阅读时长: 12(分)</span>
	

      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      
        <h2 id="1、什么是JavaScript"><a href="#1、什么是JavaScript" class="headerlink" title="1、什么是JavaScript"></a>1、什么是JavaScript</h2><p>JavaScript是一门世界上最流行的脚本语言</p>
<p>ECMAScript是JavaScript的一个标准</p>
<p>最新版本已经到es6，但是大部分浏览器只支持es5</p>
<h2 id="2、快速入门"><a href="#2、快速入门" class="headerlink" title="2、快速入门"></a>2、快速入门</h2><h3 id="引入JavaScript"><a href="#引入JavaScript" class="headerlink" title="引入JavaScript"></a>引入JavaScript</h3><p>1、内部标签</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">//</span></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>

<p>2、外部引入</p>
<p>demo1.js</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">"js/demo1.js"</span>&gt;&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>

<h3 id="语法入门"><a href="#语法入门" class="headerlink" title="语法入门"></a>语法入门</h3><figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">// 1. 定义变量  变量类型 变量名 = 变量值</span></span><br><span class="line">    <span class="keyword">var</span> score = <span class="number">1</span>;</span><br><span class="line">	</span><br><span class="line">	<span class="comment">//条件控制</span></span><br><span class="line">	<span class="keyword">if</span> (score &gt; <span class="number">60</span> &amp;&amp; score &lt; <span class="number">70</span>){</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">"60-70"</span>);</span><br><span class="line">    }<span class="keyword">else</span> <span class="keyword">if</span>(score &gt; <span class="number">70</span> &amp;&amp; score &lt; <span class="number">80</span>){</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">"70-80"</span>);</span><br><span class="line">    }<span class="keyword">else</span>{</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">"other"</span>)</span><br><span class="line">    }</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>

<h3 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h3><blockquote>
<p>Number </p>
</blockquote>
<p>js不区分小数和整数</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">123</span>   <span class="comment">//整数</span></span><br><span class="line"><span class="number">123.1</span> <span class="comment">//浮点数</span></span><br><span class="line"><span class="number">1.123e3</span> <span class="comment">//科学计数法</span></span><br><span class="line">-<span class="number">99</span> <span class="comment">//复数</span></span><br><span class="line"><span class="title class_">NaN</span> <span class="comment">// not a Number</span></span><br></pre></td></tr></tbody></table></figure>

<blockquote>
<p>字符串</p>
</blockquote>
<p>‘abc’, “abc”</p>
<blockquote>
<p>布尔值</p>
</blockquote>
<p>true, false</p>
<blockquote>
<p>逻辑运算</p>
</blockquote>
<figure class="highlight java"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&amp;&amp;</span><br><span class="line">||</span><br><span class="line">!</span><br></pre></td></tr></tbody></table></figure>

<blockquote>
<p>比较运算符</p>
</blockquote>
<figure class="highlight plaintext"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">=</span><br><span class="line">== 等于 类型不一样，但值一样，也会判断为true 如 1 “1”</span><br><span class="line">=== 绝对等于，类型一样，值也一样，结果为true</span><br></pre></td></tr></tbody></table></figure>

<p>须知：</p>
<ul>
<li>NaN === NaN（false），这个与所有的数值都不相等，包括自己</li>
<li>只能通过isNaN(NaN)，来判断是否是NaN</li>
</ul>
<p>浮点数问题</p>
<figure class="highlight plaintext"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">console.log((1/3) === (1-2/3))</span><br><span class="line">console.log(Math.abs(1/3 - (1 - 2/3) &lt; 0.0000001))</span><br></pre></td></tr></tbody></table></figure>

<p>存在精度问题</p>
<blockquote>
<p>null和undefined</p>
</blockquote>
<ul>
<li>null 空</li>
<li>undefined 未定义</li>
</ul>
<blockquote>
<p>数组</p>
</blockquote>
<p>数组中元素类型不需要相同</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="string">"hello"</span>, <span class="literal">null</span>]</span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="string">"hello"</span>, <span class="literal">null</span>)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr[<span class="number">1</span>])</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr[<span class="number">100</span>])  #数组越界，输出<span class="literal">undefined</span></span><br></pre></td></tr></tbody></table></figure>

<blockquote>
<p>对象</p>
</blockquote>
<p>对象是大括号，数组是中括号</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> person = {</span><br><span class="line">    <span class="attr">name</span>: <span class="string">"chen"</span>,</span><br><span class="line">    <span class="attr">age</span>:<span class="number">3</span>,</span><br><span class="line">    <span class="attr">tags</span>:[<span class="string">'java'</span>,<span class="string">'js'</span>,<span class="string">'c'</span>]</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<h3 id="严格检查模式"><a href="#严格检查模式" class="headerlink" title="严格检查模式"></a>严格检查模式</h3><figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">'use strict'</span>; <span class="comment">//严格检查模式，预防JavaScript的随意性导致产生的一些问题，必须放在第一行，es6语法</span></span><br><span class="line">i = <span class="number">1</span> <span class="comment">// 全局变量</span></span><br></pre></td></tr></tbody></table></figure>

<h2 id="3、数据类型"><a href="#3、数据类型" class="headerlink" title="3、数据类型"></a>3、数据类型</h2><h3 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h3><p>1、正常字符串使用，单引号，双引号包裹</p>
<p>2、转义字符 \</p>
<p>3、多行字符串，是用tab上面``包裹</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str =  <span class="string">`abc</span></span><br><span class="line"><span class="string">			abc</span></span><br><span class="line"><span class="string">			cbd`</span></span><br></pre></td></tr></tbody></table></figure>

<p>4、模板字符串</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> name = <span class="string">"chen"</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> msg = <span class="string">`你好，<span class="subst">${name}</span>`</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(msg)</span><br></pre></td></tr></tbody></table></figure>

<p>5、字符串长度</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">str.<span class="property">length</span></span><br></pre></td></tr></tbody></table></figure>

<p>6、字符串的可变性，不可变</p>
<p><img src="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-161624.png" alt="image-20230716161623046"></p>
<p>7、大小写转换</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">student.<span class="title function_">toUpperCase</span>()</span><br><span class="line">student.<span class="title function_">toLowerCase</span>()</span><br></pre></td></tr></tbody></table></figure>

<p>8、indexOf()</p>
<p><img src="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-161716.png" alt="image-20230716161715500"></p>
<p>9、substring</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">student.<span class="title function_">substring</span>(<span class="number">1</span>) <span class="comment">// 从第一个字符截取到最后一个字符</span></span><br><span class="line">student.<span class="title function_">substring</span>(<span class="number">1</span>,<span class="number">3</span>) <span class="comment">// [1，3)</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h3><p>Array可以包含任意类型</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>]</span><br></pre></td></tr></tbody></table></figure>

<p>1、长度</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.<span class="property">length</span></span><br></pre></td></tr></tbody></table></figure>

<p>给arr.length复制，数组大小会发生变化，扩大数组，以undefined填充，缩小数组，截断</p>
<p><img src="https://yichen-blog.oss-cn-beijing.aliyuncs.com//note-image/2023/07/16/20230716-161825.png" alt="image-20230716161824004"></p>
<p>2、indexOf 通过元素获得下标索引（第一个）</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="string">"1"</span>, <span class="string">"2"</span>]</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">indexOf</span>(<span class="number">1</span>))</span><br><span class="line"># <span class="number">0</span></span><br><span class="line"></span><br></pre></td></tr></tbody></table></figure>

<p>字符串“1”，和数字1不同</p>
<p>3、slice()截取Array的一部分，返回一个新的数组,类似substring</p>
<p>4、push、pop、unshift、shift</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">arr.<span class="title function_">push</span>(<span class="string">"a"</span>)             # 压入到尾部</span><br><span class="line">arr.<span class="title function_">pop</span>()                 # 弹出尾部的一个元素</span><br><span class="line">arr.<span class="title function_">unshift</span>(<span class="string">"a"</span>)          # 压入到头部</span><br><span class="line">arr.<span class="title function_">shift</span>()               # 弹出头部的一个元素</span><br></pre></td></tr></tbody></table></figure>

<p>5、排序 sort</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">(<span class="number">8</span>)&nbsp;[<span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line">arr.<span class="title function_">sort</span>()</span><br><span class="line">(<span class="number">8</span>)&nbsp;[<span class="number">1</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br></pre></td></tr></tbody></table></figure>

<p>6、元素反转 reverse</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">(<span class="number">8</span>)&nbsp;[<span class="number">1</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line">arr.<span class="title function_">reverse</span>()</span><br><span class="line">(<span class="number">8</span>)&nbsp;[<span class="number">6</span>, <span class="number">5</span>, <span class="number">4</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">1</span>]</span><br></pre></td></tr></tbody></table></figure>

<p>7、concat() 数组拼接，返回一个新的数组，并不会修改数组</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">(<span class="number">8</span>)&nbsp;[<span class="number">6</span>, <span class="number">5</span>, <span class="number">4</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">1</span>]</span><br><span class="line">arr.<span class="title function_">concat</span>([<span class="string">"q"</span>,<span class="string">"d"</span>])</span><br><span class="line">(<span class="number">10</span>)&nbsp;[<span class="number">6</span>, <span class="number">5</span>, <span class="number">4</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="string">"q"</span>, <span class="string">"d"</span>]</span><br><span class="line">arr</span><br><span class="line">(<span class="number">8</span>) [<span class="number">6</span>, <span class="number">5</span>, <span class="number">4</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">1</span>]</span><br></pre></td></tr></tbody></table></figure>

<p>8、连接符join</p>
<p>打印拼接数组，使用特定的字符从连接</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">arr.<span class="title function_">join</span>(<span class="string">"-"</span>)</span><br><span class="line"><span class="string">"6-5-4-3-2-2-1-1"</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h3><p>若干键值对</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> person = {</span><br><span class="line">    <span class="attr">name</span>: <span class="string">"chen"</span>,</span><br><span class="line">    <span class="attr">age</span>:<span class="number">3</span>,</span><br><span class="line">    <span class="attr">tags</span>:[<span class="string">'java'</span>,<span class="string">'js'</span>,<span class="string">'c'</span>]</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<p>JavaScript中所有的键都是字符串，值是任意对象</p>
<p>1、对象复制</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">person.<span class="property">name</span> = <span class="string">"yichen"</span></span><br><span class="line"><span class="string">"yichen"</span></span><br><span class="line">person.<span class="property">name</span></span><br><span class="line"><span class="string">"yichen"</span></span><br></pre></td></tr></tbody></table></figure>

<p>2、使用一个不存在的对象，不会报错，undefined</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">person.<span class="property">name2</span></span><br><span class="line"><span class="literal">undefined</span></span><br></pre></td></tr></tbody></table></figure>

<p>3、动态删减属性, delete</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">delete</span> person.<span class="property">name</span></span><br><span class="line"><span class="literal">true</span></span><br><span class="line">person</span><br><span class="line">{<span class="attr">age</span>: <span class="number">3</span>, <span class="attr">tags</span>: <span class="title class_">Array</span>(<span class="number">3</span>)}</span><br></pre></td></tr></tbody></table></figure>

<p>4、添加属性，直接给新的属性赋值</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">person.<span class="property">name</span> = <span class="string">"yichen"</span></span><br><span class="line"><span class="string">"yichen"</span></span><br><span class="line">person</span><br><span class="line">{<span class="attr">age</span>: <span class="number">3</span>, <span class="attr">tags</span>: <span class="title class_">Array</span>(<span class="number">3</span>), <span class="attr">name</span>: <span class="string">"yichen"</span>}</span><br></pre></td></tr></tbody></table></figure>

<p>5、判断属性值是否在对象中</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'age'</span> <span class="keyword">in</span> person</span><br><span class="line"><span class="literal">true</span></span><br><span class="line"><span class="string">"toString"</span> <span class="keyword">in</span> person</span><br><span class="line"><span class="literal">true</span></span><br></pre></td></tr></tbody></table></figure>

<p>6、判断属性是否是对象自身拥有的，hasOwnProperty（）</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br><span class="line">person.<span class="title function_">hasOwnProperty</span>(<span class="string">"toString"</span>)</span><br><span class="line"><span class="literal">false</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="流程控制"><a href="#流程控制" class="headerlink" title="流程控制"></a>流程控制</h3><p>if else</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> age = <span class="number">3</span>;</span><br><span class="line"><span class="keyword">if</span>(age&gt;<span class="number">3</span>){</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">"haha"</span>)</span><br><span class="line">}<span class="keyword">else</span> <span class="keyword">if</span> (age &lt;<span class="number">5</span>){</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">"wua"</span>)</span><br><span class="line">}<span class="keyword">else</span>{</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">"wwwww"</span>)</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<p>while</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">while</span>(age&lt;<span class="number">100</span>){</span><br><span class="line">    age += <span class="number">1</span>;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(age);</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<p>for </p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">100</span>; i++) {</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(i);</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<p>数组循环</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">7</span>,<span class="number">81</span>,<span class="number">9</span>,<span class="number">9</span>]</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> num <span class="keyword">in</span> arr){</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(arr[num]);</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<h3 id="Map"><a href="#Map" class="headerlink" title="Map"></a>Map</h3><figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&gt; <span class="keyword">var</span> map = <span class="keyword">new</span> <span class="title class_">Map</span>([[<span class="string">'tom'</span>, <span class="number">100</span>],[<span class="string">'jack'</span>, <span class="number">90</span>],[<span class="string">'haha'</span>, <span class="number">80</span>]]);</span><br><span class="line">&gt; <span class="keyword">var</span> name = map.<span class="title function_">get</span>(<span class="string">'tom'</span>)</span><br><span class="line">&gt; <span class="variable language_">console</span>.<span class="title function_">log</span>(name)</span><br><span class="line">&gt; map.<span class="title function_">set</span>(<span class="string">'admin'</span>, <span class="number">123</span>)</span><br><span class="line">&lt; <span class="title class_">Map</span>(<span class="number">4</span>)&nbsp;{<span class="string">"tom"</span> =&gt; <span class="number">100</span>, <span class="string">"jack"</span> =&gt; <span class="number">90</span>, <span class="string">"haha"</span> =&gt; <span class="number">80</span>, <span class="string">"admin"</span> =&gt; <span class="number">123</span>}</span><br></pre></td></tr></tbody></table></figure>

<h3 id="Set"><a href="#Set" class="headerlink" title="Set"></a>Set</h3><p>无序不重复集合</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> set = <span class="keyword">new</span> <span class="title class_">Set</span>([<span class="number">3</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">2</span>])</span><br><span class="line"><span class="title class_">Set</span>(<span class="number">3</span>) {<span class="number">3</span>, <span class="number">1</span>, <span class="number">2</span>}</span><br><span class="line"></span><br><span class="line">set.<span class="title function_">add</span>(<span class="number">5</span>)</span><br><span class="line">set.<span class="title function_">delete</span>(<span class="number">1</span>)</span><br><span class="line">set.<span class="title function_">has</span>(<span class="number">2</span>) # 集合中是否有该元素</span><br></pre></td></tr></tbody></table></figure>

<h3 id="iterator"><a href="#iterator" class="headerlink" title="iterator"></a>iterator</h3><p>遍历数组</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> x <span class="keyword">of</span> arr){</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(x)</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<p>遍历map</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> map = <span class="keyword">new</span> <span class="title class_">Map</span>([</span><br><span class="line">    [<span class="string">'tom'</span>, <span class="number">100</span>],</span><br><span class="line">    [<span class="string">'jack'</span>, <span class="number">90</span>],</span><br><span class="line">    [<span class="string">'haha'</span>, <span class="number">80</span>]</span><br><span class="line">]);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> x <span class="keyword">of</span> map) {</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(x)</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<p>遍历set</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> set = <span class="keyword">new</span> <span class="title class_">Set</span>([<span class="number">3</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">2</span>])</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> x <span class="keyword">of</span> map) {</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(x)</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<h2 id="4、函数"><a href="#4、函数" class="headerlink" title="4、函数"></a>4、函数</h2><h3 id="自定义函数"><a href="#自定义函数" class="headerlink" title="自定义函数"></a>自定义函数</h3><p>绝对值函数</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">abs</span>(<span class="params">x</span>){</span><br><span class="line">	<span class="keyword">if</span>(x &gt;= <span class="number">0</span>){</span><br><span class="line">        <span class="keyword">return</span> x;</span><br><span class="line">    }<span class="keyword">else</span>{</span><br><span class="line">        <span class="keyword">return</span> -x;</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<p>一旦执行到return，代表函数结束，返回结果</p>
<p>没有执行return， 函数执行完也会返回结果，结果就是undefined</p>
<blockquote>
<p>定义方式二</p>
</blockquote>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> abs = <span class="keyword">function</span>(<span class="params">x</span>){</span><br><span class="line">	<span class="keyword">if</span>(x &gt;= <span class="number">0</span>){</span><br><span class="line">        <span class="keyword">return</span> x;</span><br><span class="line">    }<span class="keyword">else</span>{</span><br><span class="line">        <span class="keyword">return</span> -x;</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<p>参数问题：javascript可以传任意个参数，也可以不传递参数</p>
<p>手动抛出异常：</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> abs = <span class="keyword">function</span>(<span class="params">x</span>){</span><br><span class="line">    <span class="keyword">if</span> (<span class="title function_">typeof</span>(x) !== <span class="string">'number'</span>)</span><br><span class="line">        <span class="keyword">throw</span> <span class="string">'Not a Number'</span>;</span><br><span class="line">	<span class="keyword">if</span>(x &gt;= <span class="number">0</span>){</span><br><span class="line">        <span class="keyword">return</span> x;</span><br><span class="line">    }<span class="keyword">else</span>{</span><br><span class="line">        <span class="keyword">return</span> -x;</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<blockquote>
<p>rest</p>
</blockquote>
<p>以前：</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(<span class="variable language_">arguments</span>.<span class="property">length</span>&gt;<span class="number">2</span>){</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">2</span>; i&lt;<span class="variable language_">arguments</span>.<span class="property">length</span>;i++){</span><br><span class="line">        <span class="comment">//..............</span></span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<p>ES6引入新特性，获取除了已经定义的参数之外的所有参数</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">aaa</span>(<span class="params">a,b,...rest</span>){</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"a=&gt;"</span>+a);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"b=&gt;"</span>+a);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(rest);</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<h3 id="变量的作用域"><a href="#变量的作用域" class="headerlink" title="变量的作用域"></a>变量的作用域</h3><blockquote>
<p>全局函数</p>
</blockquote>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//全局变量</span></span><br><span class="line">x = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">f</span>(<span class="params"></span>){</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(x);</span><br><span class="line">}</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(x);</span><br></pre></td></tr></tbody></table></figure>

<p>全局对象window</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="string">'xxx'</span>;</span><br><span class="line"><span class="title function_">alert</span>(x);</span><br><span class="line"><span class="title function_">alert</span>(<span class="variable language_">window</span>.<span class="property">x</span>);<span class="comment">//默认所有全局变量绑定在window对象下</span></span><br></pre></td></tr></tbody></table></figure>

<blockquote>
<p>规范</p>
</blockquote>
<p>由于所有全局变量都会绑定到window上，如果不同的js文件，使用了相同的全局变量，就会发生冲突。</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//唯一全局变量</span></span><br><span class="line"><span class="keyword">var</span> app = {};</span><br><span class="line"></span><br><span class="line"><span class="comment">//定义全局变量</span></span><br><span class="line">app.<span class="property">name</span> = <span class="string">'chen'</span>;</span><br><span class="line">app.<span class="property">add</span> = <span class="keyword">function</span>(<span class="params">a, b</span>){</span><br><span class="line">    <span class="keyword">return</span> a +  b;</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<p>把自己的代码全部放入做自己定义的唯一空间名字中，降低全局命名冲突。</p>
<blockquote>
<p>局部作用域 let</p>
</blockquote>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fun</span>(<span class="params"></span>) {</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">100</span>; i++) {</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(i);</span><br><span class="line">    }</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(i + <span class="number">1</span>); <span class="comment">// ? 出了作用域还可以使用</span></span><br><span class="line">} </span><br></pre></td></tr></tbody></table></figure>

<p>ES6 let关键字，解决局部作用域冲突问题</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fun</span>(<span class="params"></span>) {</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">100</span>; i++) {</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(i);</span><br><span class="line">    }</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(i + <span class="number">1</span>); <span class="comment">//Uncaught ReferenceError: i is not defined</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>



<blockquote>
<p>常量const</p>
</blockquote>
<p>在ES6之前，定义常量：只有用全部大写字母命名的变量就是常量，建议不要修改</p>
<p>在ES6中引入了<code>const</code></p>
<h3 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h3><blockquote>
<p>定义方法</p>
</blockquote>
<p>放在对象内部</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> person = {</span><br><span class="line">    <span class="attr">name</span>:<span class="string">"chen"</span>,</span><br><span class="line">    <span class="attr">birth</span>:<span class="number">1999</span>,</span><br><span class="line">    <span class="attr">age</span>:<span class="keyword">function</span>(<span class="params"></span>){</span><br><span class="line">        <span class="keyword">var</span> now = <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getFullYear</span>();</span><br><span class="line">        <span class="keyword">return</span> now - <span class="variable language_">this</span>.<span class="property">birth</span>;</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"><span class="comment">//属性</span></span><br><span class="line">person.<span class="property">name</span></span><br><span class="line"><span class="comment">//方法</span></span><br><span class="line">person.<span class="title function_">age</span>()</span><br></pre></td></tr></tbody></table></figure>

<p>this是无法指向的，默认指向调用它的那个对象的</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">getAge</span>(<span class="params"></span>){</span><br><span class="line">    <span class="keyword">var</span> now = <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getFullYear</span>();</span><br><span class="line">    <span class="keyword">return</span> now - <span class="variable language_">this</span>.<span class="property">birth</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> person = {</span><br><span class="line">    <span class="attr">name</span>:<span class="string">"chen"</span>,</span><br><span class="line">    <span class="attr">birth</span>:<span class="number">1999</span>,</span><br><span class="line">    <span class="attr">age</span>:getAge</span><br><span class="line">}</span><br><span class="line">person.<span class="property">name</span></span><br><span class="line"></span><br><span class="line">person.<span class="title function_">age</span>()</span><br></pre></td></tr></tbody></table></figure>

<blockquote>
<p>apply</p>
</blockquote>
<p>在js中可以控制this的指向</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">getAge.<span class="title function_">apply</span>(person)</span><br></pre></td></tr></tbody></table></figure>

<h2 id="5、内部对象"><a href="#5、内部对象" class="headerlink" title="5、内部对象"></a>5、内部对象</h2><blockquote>
<p>标准对象</p>
</blockquote>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">typeof</span> <span class="number">123</span></span><br><span class="line"><span class="string">"number"</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="string">"123"</span></span><br><span class="line"><span class="string">"string"</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="literal">true</span></span><br><span class="line"><span class="string">"boolean"</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="title class_">NaN</span></span><br><span class="line"><span class="string">"number"</span></span><br><span class="line"><span class="keyword">typeof</span> []</span><br><span class="line"><span class="string">"object"</span></span><br><span class="line"><span class="keyword">typeof</span> {}</span><br><span class="line"><span class="string">"object"</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="title class_">Math</span>.<span class="property">abs</span></span><br><span class="line"><span class="string">"function"</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="literal">undefined</span></span><br><span class="line"><span class="string">"undefined"</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="Date"><a href="#Date" class="headerlink" title="Date"></a>Date</h3><figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> now = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line">now.<span class="title function_">getFullYear</span>(); <span class="comment">//年</span></span><br><span class="line">now.<span class="title function_">getMonth</span>(); <span class="comment">//月 0~11</span></span><br><span class="line">now.<span class="title function_">getDate</span>(); <span class="comment">//日</span></span><br><span class="line">now.<span class="title function_">getDay</span>(); <span class="comment">//星期几</span></span><br><span class="line">now.<span class="title function_">getHours</span>(); <span class="comment">// 时</span></span><br><span class="line">now.<span class="title function_">getMinutes</span>(); <span class="comment">//  分</span></span><br><span class="line">now.<span class="title function_">getSeconds</span>(); <span class="comment">// 秒</span></span><br><span class="line">now.<span class="title function_">getTime</span>(); <span class="comment">//时间戳</span></span><br></pre></td></tr></tbody></table></figure>

<p>转换</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">now.<span class="title function_">toDateString</span>()</span><br><span class="line"><span class="string">"Mon Jun 07 2021"</span></span><br><span class="line">now.<span class="title function_">toLocaleDateString</span>()</span><br><span class="line"><span class="string">"2021/6/7"</span></span><br><span class="line">now.<span class="title function_">toGMTString</span>()</span><br><span class="line"><span class="string">"Mon, 07 Jun 2021 07:36:10 GMT"</span></span><br><span class="line">now.<span class="title function_">toLocaleTimeString</span>()</span><br><span class="line"><span class="string">"下午3:36:10"</span></span><br></pre></td></tr></tbody></table></figure>

<h3 id="Json"><a href="#Json" class="headerlink" title="Json"></a>Json</h3><blockquote>
<p>json</p>
</blockquote>
<ul>
<li>是一种轻量级的数据交换格式</li>
<li>简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言</li>
<li>易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率</li>
</ul>
<p>在JavaScript一切皆为对象、任何js支持的类型都可以用Json来表示；</p>
<p>格式：</p>
<ul>
<li>对象使用{}</li>
<li>数组用[]</li>
<li>所有的键值对都是key value</li>
</ul>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> person = {</span><br><span class="line">    <span class="attr">name</span>: <span class="string">"chen"</span>,</span><br><span class="line">    <span class="attr">birth</span>: <span class="number">1999</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">23</span></span><br><span class="line">}</span><br><span class="line"><span class="comment">//对象转化为json</span></span><br><span class="line"><span class="keyword">var</span> jsonUser = <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(person);</span><br><span class="line"><span class="comment">// json转换成对象</span></span><br><span class="line"><span class="keyword">var</span> obj = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="string">"{\"name\":\"chen\",\"birth\":1999,\"age\":23}"</span>)</span><br></pre></td></tr></tbody></table></figure>

<h2 id="6、面向对象"><a href="#6、面向对象" class="headerlink" title="6、面向对象"></a>6、面向对象</h2><p>之前：</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> xiaoming = {</span><br><span class="line">    <span class="attr">name</span>: <span class="string">'xiaoming'</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">3</span>,</span><br><span class="line">    <span class="attr">run</span>: <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span> + <span class="string">"  run...."</span>);</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> zhangsan = {</span><br><span class="line">    <span class="attr">name</span>: <span class="string">'张三'</span></span><br><span class="line">}</span><br><span class="line">zhangsan.<span class="property">__proto__</span> = xiaoming;</span><br><span class="line">xiaoming.<span class="title function_">run</span>()</span><br></pre></td></tr></tbody></table></figure>

<blockquote>
<p>class继承</p>
</blockquote>
<p><code>class</code>关键字，ES6引入</p>
<p>定义一个类</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Student</span>{</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name</span>){</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">    }</span><br><span class="line">    <span class="title function_">hello</span>(<span class="params"></span>){</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">"hello"</span>)</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<p>继承</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Student2</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Student</span>{</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name, grade</span>) {</span><br><span class="line">        <span class="variable language_">super</span>(name);</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">grade</span> = grade;</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="title function_">myGrade</span>(<span class="params"></span>){</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">"我是一名小学生"</span>);</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<h2 id="7、操作BOM对象"><a href="#7、操作BOM对象" class="headerlink" title="7、操作BOM对象"></a>7、操作BOM对象</h2><p>JavaScript诞生就是为了能够让他在浏览器中运行</p>
<p>BOM：浏览器对象模型</p>
<ul>
<li>IE</li>
<li>Chrome</li>
<li>Safari</li>
<li>FireFox</li>
</ul>
<blockquote>
<p>window</p>
</blockquote>
<p>window代表浏览器窗口</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="property">innerHeight</span></span><br><span class="line"><span class="number">708</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="property">innerWidth</span></span><br><span class="line"><span class="number">150</span></span><br></pre></td></tr></tbody></table></figure>

<blockquote>
<p>Navigator</p>
</blockquote>
<p>Navigator，封装了浏览器的信息</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">navigator.<span class="property">appCodeName</span></span><br><span class="line"><span class="string">"Mozilla"</span></span><br><span class="line">navigator.<span class="property">appName</span></span><br><span class="line"><span class="string">"Netscape"</span></span><br><span class="line">navigator.<span class="property">userAgent</span></span><br><span class="line"><span class="string">"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36"</span></span><br><span class="line">navigator.<span class="property">platform</span></span><br><span class="line"><span class="string">"Win32"</span></span><br></pre></td></tr></tbody></table></figure>

<p>一般不会使用<code>navigator</code>，因为会被人为修改</p>
<blockquote>
<p>screen</p>
</blockquote>
<p>屏幕尺寸</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">screen.<span class="property">width</span></span><br><span class="line"><span class="number">1536</span></span><br><span class="line">screen.<span class="property">height</span></span><br><span class="line"><span class="number">864</span></span><br></pre></td></tr></tbody></table></figure>

<blockquote>
<p>location</p>
</blockquote>
<p>location代表当前页面URL</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">host</span>: <span class="string">"github.com"</span></span><br><span class="line"><span class="attr">hostname</span>: <span class="string">"github.com"</span></span><br><span class="line"><span class="attr">href</span>: <span class="string">"https://github.com/"</span></span><br><span class="line"><span class="attr">origin</span>: <span class="string">"https://github.com"</span></span><br><span class="line"><span class="attr">pathname</span>: <span class="string">"/"</span></span><br><span class="line"><span class="attr">port</span>: <span class="string">""</span></span><br><span class="line"><span class="attr">protocol</span>: <span class="string">"https:"</span></span><br><span class="line"></span><br><span class="line"><span class="attr">reload</span>: f <span class="title function_">reload</span>() <span class="comment">// 刷新网页</span></span><br><span class="line"><span class="comment">//设置新的地址</span></span><br><span class="line">location.<span class="title function_">assign</span>(<span class="string">"https://www.baidu.com/"</span>)</span><br></pre></td></tr></tbody></table></figure>

<blockquote>
<p>document</p>
</blockquote>
<p>document代表当前页面，HTML DOM文档树</p>
<blockquote>
<p>history</p>
</blockquote>
<p>distory代表浏览器的历史记录</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">history.<span class="title function_">back</span>()</span><br><span class="line">history.<span class="title function_">forward</span>()</span><br></pre></td></tr></tbody></table></figure>

<h3 id="8、操作DOM对象"><a href="#8、操作DOM对象" class="headerlink" title="8、操作DOM对象"></a>8、操作DOM对象</h3><blockquote>
<p>核心</p>
</blockquote>
<p>浏览器网页就是一个Dom树形结构！</p>
<ul>
<li>更新：更新DOM节点</li>
<li>遍历</li>
<li>删除</li>
<li>添加</li>
</ul>
<blockquote>
<p>获得dom节点</p>
</blockquote>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"father"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>标题<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">"p1"</span>&gt;</span>p1<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"p2"</span>&gt;</span>p2<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> h1 = <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">'h1'</span>);</span><br><span class="line"><span class="keyword">var</span> p1 = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'p1'</span>);</span><br><span class="line"><span class="keyword">var</span> p2 = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">'p2'</span>);</span><br><span class="line"><span class="keyword">var</span> father = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'father'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> childern = father.<span class="property">children</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//father.firstchild</span></span><br><span class="line"><span class="comment">//father.lastChild</span></span><br></pre></td></tr></tbody></table></figure>

<blockquote>
<p>更新节点</p>
</blockquote>
<p>操作文本</p>
<ul>
<li>id1.innerText = ‘213’修改文本的值</li>
<li>id.innerHTML = “<p> 123</p>“可以解析HTML文本标签</li>
</ul>
<p>操作css</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">id1.<span class="property">style</span>.<span class="property">color</span> = <span class="string">'yellow'</span></span><br><span class="line">id1.<span class="property">style</span>.<span class="property">fontSize</span> = <span class="string">'20px'</span></span><br><span class="line">id1.<span class="property">style</span>.<span class="property">padding</span> = <span class="string">'2em'</span></span><br></pre></td></tr></tbody></table></figure>

<blockquote>
<p>删除节点</p>
</blockquote>
<p>删除节点步骤：先获取父节点，在通过父节点删除自己</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"father"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>标题<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">"p1"</span>&gt;</span>p1<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"p2"</span>&gt;</span>p2<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">var</span> self = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'p1'</span>);</span><br><span class="line">    <span class="keyword">var</span> father = p1.<span class="property">parentElement</span>;</span><br><span class="line">    father.<span class="title function_">removeChild</span>(self)</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></tbody></table></figure>

<blockquote>
<p>插入节点</p>
</blockquote>
<p>如果DOM节点是空的，可以通过innerText添加元素，但是存在元素是会覆盖。</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">"js"</span>&gt;</span>JavaScript<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"list"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">"se"</span>&gt;</span>JavaSE<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">"ee"</span>&gt;</span>JavaEE<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">"me"</span>&gt;</span>JavaME<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>

<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> js = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'js'</span>);</span><br><span class="line"><span class="keyword">var</span> list = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">'list'</span>);</span><br><span class="line">list.<span class="title function_">appendChild</span>(js); <span class="comment">// 追加</span></span><br></pre></td></tr></tbody></table></figure>

<p>创建一个新标签</p>
<figure class="highlight js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> newP = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">'p'</span>);</span><br><span class="line">newP.<span class="property">id</span> = <span class="string">'newP'</span>;</span><br><span class="line">newP.<span class="property">innerText</span> = <span class="string">'hello'</span></span><br><span class="line">list.<span class="title function_">appendChild</span>(<span class="string">'newP'</span>)</span><br></pre></td></tr></tbody></table></figure>

<h2 id="9、操作表单"><a href="#9、操作表单" class="headerlink" title="9、操作表单"></a>9、操作表单</h2><blockquote>
<p>表单</p>
</blockquote>
<ul>
<li>文本框 text</li>
<li>下拉框 <select>
单选框 &lt;&gt;
多选框
隐藏域
密码框
…………

10、jQueryJavaScript
jQuery库，javascript的函数库

获取jQuery

https://jquery.com/download/
1&lt;script src="js/jQuery-3.6.0.js"&gt;&lt;/script&gt;



jQuery公式：$(selector).action()
1234567&lt;a href="" id="test-jquery"&gt;点我&lt;/a&gt;&lt;script&gt;	//选择器就是css选择器    $('#test-jquery').click(function(){        alert('hello');    })&lt;/script&gt;

</select></li></ul>
      
    </div>
    <div class="article-footer">
      <blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接：</strong>
      <a href="https://yichenfirst.github.io/2021/06/08/%E5%89%8D%E7%AB%AF/JavaScript/" title="JavaScript" target="_blank" rel="external">https://yichenfirst.github.io/2021/06/08/前端/JavaScript/</a>
    </li>
    
    <li class="post-copyright-license">
      <strong>版权声明： </strong> 本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN协议</a> 许可协议。转载请注明出处！
    </li>
  </ul>
</blockquote>


<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="/images/avatar.jpg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="" target="_blank"><span class="text-dark">逸辰</span><small class="ml-1x">后端开发</small></a></h3>
        <div>个人简介。</div>
      </div>
    </figure>
  </div>
</div>


    </div>
  </article>
  
    
  <section id="comments">
  	
      <div id="vcomments"></div>
    
  </section>


  
</div>

  <nav class="bar bar-footer clearfix" data-stick-bottom>
  <div class="bar-inner">
  
  <ul class="pager pull-left">
    
    <li class="prev">
      <a href="/2021/07/30/%E5%89%8D%E7%AB%AF/vue%E7%AC%94%E8%AE%B0/" title="vue笔记"><i class="icon icon-angle-left" aria-hidden="true"></i><span>&nbsp;&nbsp;上一篇</span></a>
    </li>
    
    
    <li class="next">
      <a href="/2021/03/08/java/ArrayList%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/" title="ArrayList源码分析"><span>下一篇&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a>
    </li>
    
    
  </ul>
  
  
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-fancy btn-donate pop-onhover bg-gradient-warning" data-toggle="modal" data-target="#donateModal"><span>赏</span></button>
  <!-- <div class="wave-icon wave-icon-danger btn-donate" data-toggle="modal" data-target="#donateModal">
    <div class="wave-circle"><span class="icon"><i class="icon icon-bill"></i></span></div>
  </div> -->
  
  
  <div class="bar-right">
    
  </div>
  </div>
</nav>
  
<!-- Modal -->
<div class="modal modal-center modal-small modal-xs-full fade" id="donateModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content donate">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <div class="modal-body">
        <div class="donate-box">
          <div class="donate-head">
            <p>感谢您的支持，我会继续努力的!</p>
          </div>
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade active in" id="alipay">
              <div class="donate-payimg">
                <img src="/images/donate/alipayimg.png" alt="扫码支持" title="扫一扫" />
              </div>
              <p class="text-muted mv">扫码打赏，你说多少就多少</p>
              <p class="text-grey">打开支付宝扫一扫，即可进行扫码打赏哦</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="wechatpay">
              <div class="donate-payimg">
                <img src="/images/donate/wechatpayimg.png" alt="扫码支持" title="扫一扫" />
              </div>
              <p class="text-muted mv">扫码打赏，你说多少就多少</p>
              <p class="text-grey">打开微信扫一扫，即可进行扫码打赏哦</p>
            </div>
          </div>
          <div class="donate-footer">
            <ul class="nav nav-tabs nav-justified" role="tablist">
              <li role="presentation" class="active">
                <a href="#alipay" id="alipay-tab" role="tab" data-toggle="tab" aria-controls="alipay" aria-expanded="true"><i class="icon icon-alipay"></i> 支付宝</a>
              </li>
              <li role="presentation" class="">
                <a href="#wechatpay" role="tab" id="wechatpay-tab" data-toggle="tab" aria-controls="wechatpay" aria-expanded="false"><i class="icon icon-wepay"></i> 微信支付</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



</main>

  <footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
	
    <div class="copyright">
    	
        &copy; 2023 逸辰
        
        <div class="publishby">
        	Theme by <a href="https://github.com/cofess" target="_blank"> cofess </a>base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>.
        </div>
    </div>
</footer>
  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

<script src="/js/plugin.min.js"></script>


<script src="/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/js/insight.js"></script>






   
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





   
    
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/valine"></script>
  <script type="text/javascript">
  var GUEST = ['nick', 'mail', 'link'];
  var meta = 'nick,mail,link';
  meta = meta.split(',').filter(function(item) {
    return GUEST.indexOf(item) > -1;
  });
  new Valine({
    el: '#vcomments',
    verify: false,
    notify: false,
    appId: '',
    appKey: '',
    placeholder: 'Just go go',
    avatar: 'mm',
    meta: meta,
    pageSize: '10' || 10,
    visitor: false
  });
  </script>

     







</body>
</html>